<template>
	<view>
		<scroll-view :style="'height:'+winHeight" class="scroller" :scroll-into-view="toView" @scroll="scroll"
		scroll-y="true" scroll-with-animation="true">
			<!-- 标题结束 -->
			<view id="xingxi" class="goods_img_box">
				<!-- 商品图片 -->
				<view class="relative">
					<swiper class="swiper_box" @change="swiper" :circular="true">
						<swiper-item>
							<image :src="newData.pgoods_image" mode="aspectFill"></image>
						</swiper-item>
					</swiper>
				
					<view class="back_round_2">1/1</view>
				</view>	
				<view style="padding: 0 25upx;font-size:33upx;color: #333;line-height: 40upx;" class="">
					{{newData.pgoods_name}}
				</view>		
				
				<view style="display: flex;justify-content: space-between;padding: 0 25upx;line-height: 80upx;" class="">
					<text style="font-size: 40upx;color:#e5258e;" class="">
						￥{{newData.pgoods_price}}
					</text>
					<text style="font-size: 27upx;color:#666;" class="">
						兑换数量
					</text>
				</view>
				<view style="display: flex;justify-content: space-between;padding: 0 25upx;line-height: 80upx;" class="">
					<text style="font-size:27upx;color:#feb518;" class="">
						所需积分：{{newData.pgoods_points}}积分
					</text>
					<text style="margin-right: 40rpx;">×1</text>
				</view>
				<view style="" class="spxqTitle">—— 商品详情 ——</view>
				<view v-if="htmlGoodsDetail.length == 0" style="text-align: center; ">该商品暂无详情！</view>
				<rich-text v-else :nodes="htmlGoodsDetail"></rich-text> 
				<view style="height: 50px;"> </view>
			</view>			
		</scroll-view>
		<!-- 购物车 -->
		
		<view style="width: 666upx;height: 38px;line-height: 38px;border-radius: 38px;text-align: center;background-color: #ff4300;color: #fff;font-size: 27upx;position: fixed;left: 42upx;bottom: 10px;" @click="confirm()">确认兑换
			
		</view>
	</view>
</template>

<script>
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'
	import uniGoodsNav from '../components/uni-goods-nav/uni-goods-nav.vue'
	import uniPopup from "@/components/uni-popup/uni-popup.vue"
	export default{
		components: {uniPopup,uniGoodsNav,uniNavBar},
		data(){
			return{
				active:0,
				
				swiperImage:[],
				swiperCurrent:0,
				isFavorites:false,
				isXuanze:false,
				shi:0,
				fen:0,
				num:1,//购买数量
				limit:100,//限购数量
				miao:0,
				allMiao:0,
				pinuanTime:[],
				pintuanInfo:[],
				goods_id:1,
				full_activity:'',
				activity:0,//是否有活动0：普通商品 1：限时 2：抢购 3：秒杀
				goodsInfo:[],//商品信息
				store_info:[],//店铺信息
				collectFlag:0,
				goods_commend:[],//推荐信息
				goodsevallist:[],//评论信息
				spec_list:[],
				goods_spec:[],//型号数组
				spec_goods_list:[],
				specific:'',
				activeText:'限时折扣',
				activeText2:'直降',
				consulList:[],//资讯列表
				goodsImage:'',//商品详细信息
				winHeight: '100%',
				toView:'',//锚点
				actionView: 'xingxi',//控制导航显示
				productBoxTop: 0,//商品模块距离顶部的距离
				commentBoxTop: 0,//评价模块距离顶部的距离
				infoBoxTop: 0,//详情模块距离顶部的距离
				goodsBoxTop:0,//推荐商品模块距离顶部的距离
				userInfo:[],//用户的个人信息
				newData:{},
				htmlGoodsDetail:''
			}
		},
		onLoad(e){
			if(e.goods_id){
				this.goods_id=e.goods_id;
			}
			
			this.getInfo();
		},
		methods:{
			numberBox(e){
				this.num=e
			},
			confirm(){
				this.$util.request({
					url:'/mobile/index.php?act=pointcart&op=step1',
					method:'post',
					data:{pid:this.goods_id}
				}).then(res=>{
					console.log(res)
					if(res.error_code==0){
						uni.redirectTo({
							url:"./OrderInfo?pid="+this.goods_id
						})
					}else{
						uni.showToast({
							title:res.message,
							icon:"none"
						})
					}
				})
			},
			getInfo(){
				this.$util.request({
					url:"/mobile/index.php?act=pointprod&op=pinfo",
					method: 'get',
					data: {
						"pid":this.goods_id
					},
				}).then((res)=> {		
					this.newData = res.datas.prodinfo
					
					console.log(this.newData.pgoods_body)
					
					//html宽度处理
					this.htmlGoodsDetail = this.addStyleToImgTags(this.newData.pgoods_body)
					console.log("htmlString",this.htmlGoodsDetail)
				})
			},
			addStyleToImgTags(htmlString) {
					return htmlString.replace(/<img.+style=".+?"/gi, function(match) {
					    return match.replace(/style=".+?"/, 'style="width:99%;height:auto"');
					});   
				},
			//导航栏回退
			goBack(){
				uni.navigateBack()
			},
			//轮播图改变状态
			swiper(e){
				this.swiperCurrent=e.detail.current
			}
		

		}
	}
</script>


<style scoped>
	.share_goods_name{
		width: 440rpx;
		overflow: hidden;
		display: -webkit-box; 
		-webkit-line-clamp: 2; 
		-webkit-box-orient: vertical;
		text-overflow: ellipsis;
	}
	rich-text img {
		width: 100% !important;
		height: auto !important; 
	}
	.uni-numbox{
		height: 50rpx !important;
	}
	/* 样式穿透 */
/deep/.uni-numbox__plus,/deep/.uni-numbox__minus{
		width: 50rpx !important;
		font-size: 34rpx !important;
	}
	.active_border{
		color: #DE2362;background: linear-gradient(to right,#F46476,#ff4300);
		border-radius: 10rpx;color: #FFFFFF;padding: 5rpx 10rpx;font-size: 26rpx;
		margin-right: 20rpx;
	}
	.spec_name{
		border-top: 1rpx solid #F0F0F0;padding: 40rpx 20rpx;
		margin-top: 40rpx;font-size: 30rpx;
	}
	.video_icon{
		height: 100rpx !important;
		width: 100rpx !important;position: absolute;top: 42%;left: 42%;
	}
	.pintuanName{
		margin-right: 10rpx;overflow: hidden;text-overflow: ellipsis;width: 120rpx;
	}
	scroll-view{
		height: 100vh;
		
	}
	.full_title{
		font-size: 24rpx;color: #F1315E;border: 1rpx solid #F1315E;
		border-radius: 20rpx;padding: 0rpx 20rpx;
	}
	.full_image{
		width: 16rpx;height: 26rpx;margin-left: 20rpx;
	}
	.full_title_box{
		margin-top: 20rpx;
	}
	.full_list{
		margin-left: 130rpx;
		margin-top: -46rpx;
	}
	.full_list view{
		font-size: 28rpx;
		color: #333333;
	}
	.full_header{
		font-size: 34rpx;display: flex;justify-content: space-between;align-items: center;
		color: #343434;border-bottom: 1rpx solid #EEEEEE;
	}
	.full_header view{
		font-size: 30rpx;
	}
	.full_header image{
		height: 30rpx;
		width: 30rpx;
	}
	.full_box{
		height: 800rpx;background-color: #FFFFFF;padding:20rpx;
	}
	
	.add_pintuan{
		height: 44rpx;width: 120rpx;line-height: 44rpx;color: #FFFFFF;
		border-radius: 10rpx;background-color:#ff4141;font-size: 24rpx;padding: 0;
		margin-left: 20rpx;
	}
	.pintuan_box{
		background-color: #f6eec0;height: 75rpx;display: flex;align-items: center;
	}
	.pintuan_box image{
		height: 60rpx;width: 60rpx;margin: 0 20rpx;
	}
	.size24{
		font-size: 24rpx;
	}
	.buy_car_pintuan{
		height: 44rpx;width: 120rpx;line-height: 44rpx;color: #FFFFFF;
		border-radius: 10rpx;background-color:#ff4141;font-size: 24rpx;padding: 0;
		position: absolute;right: 20rpx;
	}
	.Amount{
		font-size: 18rpx;
		background-color: #ff4300;
		color: #FFFFFF;
		border-radius: 10rpx;
		margin: 10rpx 0px;
		padding: 10rpx 20rpx;
	}
	.left_imag image{
		width: 12rpx;
		height: 20rpx;
	}
	.Layout {
		background-color: #FFFFFF;
		padding: 0 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
	}
	.brand{
		background-color: #FFFFFF;
		display: flex;
		border-bottom: 1rpx solid #EEEEEE;
		padding: 15rpx 0;
		padding:20rpx;
	}
	.brand view{
		margin-right: 30rpx;
		color: #000000;
	}
	.brand image{
		width: 12rpx;
		height: 12rpx;
		margin-right: 10rpx;
		vertical-align: middle;
	}
	.goods_img_box{
		padding: 0rpx 20rpx 0; background-color: #FFFFFF;
	}
	.dianpuImg{
		width: 107upx;height: 107upx;
	}
	.dianpuImg image{
		width: 100%;
		height: 100%;
	}
	.cuxiao{
		background-color: #e5258e;padding:6rpx;font-weight: normal;
				border-radius: 10rpx;color: #ffffff;text-align: center;
				font-size: 12px;display: inline;
	}
	.flex_center_warp{
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}
	.flex_center_center{
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
	}
	.huangou{
		background: linear-gradient(to bottom,#DCA8B9,#FFF9FC);
		padding:20rpx 20rpx 0;
	}
	.ycang{
		width: 600rpx;
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		text-overflow: ellipsis;
	}
	.xsqg{
		background-color: #e5258e;height: 48rpx;width: 110rpx;
		border-radius: 10rpx;color: #ffffff;line-height: 48rpx;text-align: center;
		font-size: 12px;
	}
	.qqg{
		background: linear-gradient(to right bottom,#ff4300,#8E16B1);
		/* background-color: #0F77ED; */
		height: 48rpx;width: 110rpx;
		border-radius: 10rpx;color: #ffffff;line-height: 48rpx;text-align: center;
		font-size: 12px;
	}
	.zhiyou{
		    border: 1rpx solid #0F77ED;
		    height: 46rpx;width: 110rpx;
		    border-radius: 10rpx;line-height: 46rpx;text-align: center;
		    font-size: 12px;margin-left: 20rpx;
		    color: #0F77ED;
	}
	.spxqTitle{
		width: 100%;
		height: 80upx;
		line-height: 80upx;
		color: #999999;
		text-align: center;
		background-color: #f4f4f4;
	}
	.tiem_box{
		height: 30rpx;
		line-height: 30rpx;
	}
	.jifenling{
		background-color: #FFFFFF;margin-top: 20rpx;padding: 10rpx 0;
	}
	.houer{
		font-size: 24rpx;background-color: #000000;padding:5rpx 8rpx;
		border-radius: 10rpx;
	}
	.flex_center_around{
		margin-top: 10rpx;display: flex;justify-content: space-around;align-items: center;
	}
	.item03_box{
		width: 200rpx;height: 160rpx;background-color: #F8BB51;border-radius: 20rpx;
		text-align: center;color: #FFFEFF;
	}
	.shichangjia{
		color: #DACAD1;font-size: 24rpx;
	}
	.item02_box{
		padding: 0px 7px;border-radius: 5px;background-color: #ffffff;
		margin-left: 20rpx;color: #C10E57;font-size: 26rpx;
	}
	.xiaoliang{
		font-size: 24rpx;color: #FFFFFF;
	}
	.tejia{
		color: #FFFFFF;background-color: #850439;margin-right: 20rpx;
		border-radius: 5px;padding: 2px 4px;font-size: 12px;
	}
	.flex_center_bettween{
		display: flex;align-items: center;justify-content: space-between;
	}
	.item01_box{
		background-color: #BE024F;padding: 20rpx;margin: 0 -20rpx;
	}
	.dongtian{
		background-color: #fff;
		height: 104upx;
		box-sizing: border-box;
		position: relative;
	}
	.dongtianLeft{
		line-height: 36upx;
		float: left;
		width: 630upx;
		font-size:33upx ;
		padding:18upx 20upx;	
	}
	.dongtianRight{
		margin-top: 20upx;
		background-color: #ff4300;
		width: 84upx;
		height: 32upx;
		line-height: 32upx;
		font-size: 21upx;
		color: #FFFFFF;
		border-bottom-left-radius: 10upx;
		border-top-left-radius: 10upx;
	}
	.twoline{
	   overflow : hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	.commonLine{
		padding:20upx 20upx;
		background-color: #fff;
		font-size: 27upx;
		color: #666666;
		border-top: 10upx solid #f4f4f4;	
	}
	.commonBtn{
		background-color: #ff4300;
		font-size: 21upx;
		border-radius: 10upx;
		padding:2upx 15upx;
		margin: 0 20upx;
		color: #FFFFFF;
	}
	.algn{
		width:100%;text-align: center;
	}
	.canshu_pop{
		/* height:500rpx; */
		background-color: #FFFFFF;padding: 50rpx 20rpx;
	}
	.pop_button{
		margin: 0;
		width: 50%;
		border: none;
		border-radius: 0 !important;
		color: #FFFEFF;
	}
	.width_100{
		width: 100%;
	}
	.guige{
		margin-top: 20rpx;
		padding: 0 20rpx;
		height: 40rpx;
		line-height: 40rpx;
		font-size: 26rpx;
		margin-right: 20rpx;
	}
	.guige_border{
		border: 1rpx solid #666666;
		border-radius: 20rpx;
	}
	.guoge_xuanze{
		border: 1rpx solid #E5258E;
		border-radius: 20rpx;
		color: #E5258E;
	}
	.guoge_xuanze2{
		border: 1rpx solid #E5258E;
		border-radius: 20rpx;
		color: #E5258E;
	}
	.fs12{
		font-size: 18upx
		/* font-size: 12upx */
	}
	.blackBox{
		width: 30upx;
		height: 35upx;
		lne-height: 35upx;
		border-radius: 5upx;
		text-align: center;
		background-color: #000000;
		color: #FFFFFF;	
	}
	.djsBottomRight{
		background-color: #ff4300;
		border-radius: 10upx;
		padding: 2upx 10upx;
		height: 32upx;
		line-height: 32upx;
		font-size: 21upx;
		color: #FFFFFF;
		margin-right: 20upx;
	}
	.chisky{
		margin-top: 10upx;
		background-color: #fff;
		height: 136upx;
		padding: 15upx 20upx;
		
	}
	.chiskyC{
		margin-left: 20upx;
	}
	.chiskyC view{
		font-size: 26rpx;
	}
	.chiskyR{
		margin-top:30upx ;
	}
	.chiskyRB1{		
		padding: 0upx 26upx;
		font-size: 26rpx;
		color: #ff4300;
		border-radius: 50upx;
		background-color: #fff;
		border: 1px solid #ff4300;
	}
	.chiskyRB2{
		padding: 0upx 26upx;
		font-size: 26rpx;
		color: #FFFFFF;
		border-radius: 50upx;
		background-color: #ff4300;
		border: 1px solid #ff4300;
		margin-left: 20upx;
	}
	.djsBottom{
		width: 715upx;
		height: 50upx;
		background-color: #fff;
		border-radius: 5upx;
		position: relative;
		top: 20upx;
	}
	.jmm{
		border: 1px solid #ff4300;
		border-radius: 10upx;
		height: 32upx;
		line-height: 32upx;
		font-size: 21upx;
		color: #ff4300;
		margin: 0 10rpx;
		padding:4rpx 10rpx;
	}
	.fl{
		float: left;
	}
	.fs18{
		font-size: 18upx
	}
	.flex{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-content: space-between;
	}
	.Cfff{
		color: #FFFFFF;
	}
	.djsTopLeftTopB{
		text-align: center;
		float: left;
		width: 130upx;
		height: 40upx;
		line-height: 40upx;
		border-radius: 10upx;
		background-color: #850439;
		font-size: 21upx;
		color: #FFFFFF;		
	}
	.djsTopLeftTopV{
		float: left;
		color: #FFFFFF;	
		font-style: 12upx;
		padding-left: 20upx;
		margin-top: -4upx;
	}
	.djsTopLeftBottom{
		clear: both;
		padding-top:30upx;
	}
	.djsTopLeftBottomV{
		float: left;
	}
	.djsTopLeftBottomB{
		text-align: center;
		float: left;
		width: 220upx;
		height: 50upx;
		line-height: 50upx;
		background-color: #fff;
		border-radius: 10upx;
		margin-left: 20upx;
		margin-top: -6upx;
	}
	.djsTopRight{
		width: 155upx;
		float: right;
		height: 120upx;
		background-color: #f7bb52;
		border-radius: 10upx;
		text-align: center;		
		padding-top: 14upx;
		padding-left: 10upx;
		padding-right: 10upx;
		padding-bottom: 10rpx;
	}
	.daojishiWrap{
		margin-top: -16upx;
		height: 250upx;
		box-sizing: border-box;
		padding: 20upx;
		background-color: #ff4300;
	}
	.icon_item01{
		width: 20rpx;height: 25rpx;margin-right: 10rpx;
	}
	.icon_item02{
		width: 27rpx;height: 27rpx;margin-right: 5rpx;
	}
	.fund{
		height: 60rpx;padding: 20rpx 0;
	}
	.shop_logo{
		height: 60rpx;width:90rpx;
	}
	.button1{
		width: 140rpx;height: 50rpx;border-radius: 30rpx;line-height: 48rpx;background-color: #FFFFFF;
		border:1rpx solid #ff4300;font-size: 28rpx;padding: 0;margin: 0 40rpx;color: #ff4300;
	}
	.button2{
		width: 140rpx;height: 50rpx;border-radius: 30rpx;
		line-height: 50rpx;background-color: #ff4300;font-size: 28rpx;padding: 0;margin: 0;color: #FFFFFF;
	}
	button::after{
		/* border-color: #ff4300; */
	}
	/* 二维码分享 */
	.share_pop_close{
		height: 75rpx;width: 75rpx;position: absolute;bottom:-100rpx; left:45%;
	}
	.share_pop_bottom_view{
		width: 100%;text-align: center;
	}
	.share_pop_bottom_view button{
		width: 100rpx;height: 40rpx;border-radius: 10rpx; color: #FFFFFF;font-size: 24rpx;
		background-color: #ff4300;line-height: 40rpx;margin-top: 20rpx;
		/* #ifdef H5 */
		width: 120rpx;
		/* #endif */
	}
	.share_pop_shop_wechat{
		width: 110rpx;height: 110rpx;margin-right: 20rpx;
	}
	.share_pop_shop_info{
		margin-left: 20rpx;
	}
	.share_pop_shop_image{
		height: 540rpx;width:540rpx;margin-left: 20rpx;
	}
	.share_pop_header{
		margin: 20rpx 0;
	}
	.share_pop_header image{
		height: 80rpx;width: 80rpx;margin-right: 20rpx;
	}
	.share_pop_logo_title{
		margin: 0 10rpx 10rpx;
		font-size: 26rpx;
	}
	.share_btn{
		height: 34rpx;width:95rpx;background-color: #ff4300;border-bottom-left-radius: 40rpx;border-top-left-radius: 40rpx;
		padding-left: 20rpx;line-height: 34rpx;
	}
	.share_btn image{
		height: 22rpx;width: 20rpx;margin: 0rpx 10rpx 0 0;
	}
	.share_btn text{
		color:#FFFFFF;line-height: 20rpx;
	}
	.share_pop_logo{
		width: 205rpx;height: 65rpx;
	}
	.share_pop_top_box{
		padding:37rpx 0 0 30rpx;
	}
	.share_pop_box{
		width: 640rpx;height: 1055rpx;background-color: #FFFFFF;position: relative;
		/* #ifdef H5 */
		height: 1080rpx;
		/* #endif */
	}
	/* end */
	/* 购物车定位 */
	.shop_postion{
		position: fixed;z-index: 10;width: 100%;left: 0;bottom: 0;
	}
	/*  */
	.recommend_img{
		height: 224rpx;width: 224rpx;
	}
	.recommend_img image{
		width: 100%;height: 100%;
	}
	.ellipsis{
		margin-top: 16upx;width: 224rpx;overflow: hidden;display: -webkit-box; -webkit-line-clamp: 2;
		-webkit-box-orient: vertical;text-overflow: ellipsis;height: 94rpx;
	}
	.p-b-40{
		padding-bottom: 40rpx;
	}
	.m-b-10{
		margin-bottom: 10rpx;
	}
	.evaluate{
		padding-top:0 !important;
	}
	.evaluate image{
		height: 40rpx;width: 40rpx;margin-right: 14rpx;
	}
	/* 左右中布局 */
	.picker_box{
		font-size: 30rpx;height: 80rpx;
	}
	.p-tb-20{
		padding-top: 20rpx;
		padding-bottom: 20rpx;
	}
	.cont{
		background-color: #FFFFFF;
		padding-right:20rpx;
		padding-left: 20rpx;
	}
	.m-t-b-20{
		margin: 20rpx 0;
	}
	.zhong{
		padding: 10rpx 0 5rpx;
	}
	.zhong_title{
		margin-left: 100rpx;margin-right: 15rpx;
	}
	.c8{
		color: #9e9e9e;
	}
	.font24{
		font-size: 24rpx;
	}
	.fontc06{
		color: #ff4300;
	}
	.font30{
		font-size: 30rpx;
	}
	.m-r-40{
		margin-right: 40rpx;
	}
	/* 商品title */
	.shop_title{
		font-size: 30rpx;font-weight: bold;line-height: 40rpx;
		width: 1050rpx;
	}
	.shop_share{
		height: 60rpx;width:180rpx;background-color: #F4F4F4;border-bottom-left-radius: 40rpx;border-top-left-radius: 40rpx;
		padding-left: 20rpx;line-height: 60rpx;margin: 10rpx -20rpx 0 30rpx;
	}
	.shop_share image{
		height: 22rpx;width: 20rpx;margin: 0rpx 10rpx 0 0;
	}
	.shop_share text{
		color:#666666;line-height: 20rpx;
	}
	/*  */
	.right_arrow{
		width: 16rpx;height: 22rpx;margin-left: 14rpx;
	}
	.uni-popup{
		/* height:600rpx;
		width: 100%; */
	}
	.rich{
		width: 100rpx;height:40rpx;background-color:#ffeaf5;font-size:20rpx;border-radius: 50rpx;line-height: 40rpx;text-align: center;color: #da6294;
	}
	.subInfo{
		padding: 20rpx 0;
		color: #666666;
	}
	.subInfo view{
		font-size: 26rpx;
	}
	/*  */
	.moeny_icon{
		color: #ff4300;font-weight: bold;font-size: 30rpx;
	}
	.newMoney{
		font-size: 42rpx;color: #ff4300;font-weight: bold;margin: 0 15rpx;
	}
	.decoration{
		text-decoration: line-through;
	}
	.oldMoney{
		color:#d3d3d0;font-size: 24rpx;padding-left: 20rpx;
	}
	.promotion{
		width: 100rpx;height:40rpx;background-color:#ffeaf5;font-size:20rpx;border-radius: 50rpx;margin-top: 20rpx;
		line-height: 40rpx;text-align: center;color: #da6294;
	}
	.get{
		display: flex;height: 40rpx;width: 185rpx;border: 1rpx solid #f84aa1;border-radius: 20rpx;text-align: center;
		color: #ff4300;
	}
	.get_left{
		line-height: 40rpx; font-size: 26rpx;border-radius:20rpx;margin-left:-5rpx;background-color: #f13995;color: #FFFFFF;width: 95rpx;margin-right: 10rpx;
	}
	.get_right{
		line-height: 40rpx; font-size: 26rpx
	}
	.margin-{
		margin-bottom: -20rpx;
	}
	
	.flex_bettween{
		display: flex;
		justify-content: space-between;
	}
	.flex_center_between{
		display: flex;justify-content: space-between;align-items: center;
	}
	.flex-warp{
		flex-wrap: wrap;
	}
	.flex_center{
		display: flex;align-items: center;
	}
	.flex{
		display: flex;
	}
	.nav{
		height: 55rpx;display: flex;align-items: center;justify-content: space-around;
		position: fixed;z-index: 999;width: 100%;padding: 0 20rpx;background-color: #FFFFFF;
	}
	.back{
		height: 30rpx;width: 15rpx;
		margin-top: 18rpx;
	}
	.nav_right{
		width: 10%;
		margin-right: 20rpx;
	}
	.nav_left{
		width: 10%;
	}
	.more{
		width: 40rpx;height: 10rpx;
		margin-bottom: 5rpx;
	}
	.nav_title{
		display: flex;width: 60%;justify-content: center;text-align: center;margin: 0 15%;
	}
	.nav_title_item{
		width: 25%;font-size: 34rpx;
	}
	.relative{
		position: relative;
	}
	.back_round_1{
		height: 71rpx;width: 71rpx;border-radius: 50%;background-color: rgba(0,0,0,0.3);line-height: 82rpx;
		position: absolute;top:50rpx;right: 20rpx;text-align: center;
	}
	.swiper_box{
		height: 680rpx;
		padding: 20rpx 0 0;
	}
	.swiper_box image{
		width: 100%;
		height: 100%;
	}
	.back_round_1 image{
		height: 37rpx;width:37rpx;
	}
	.back_round_2{
		height: 71rpx;width: 71rpx;border-radius: 50%;background-color: rgba(0,0,0,0.3);line-height: 71rpx;
		position: absolute;bottom:30rpx;right: 20rpx;text-align: center;color: #FFFFFF;
	}
	.active{
		border-bottom:5rpx solid #ff4300 ;
		color: #ff4300;
	}
	/* 状态栏 */
	.status_bar {  
	    height: var(--status-bar-height);  
	    width: 100%;  
	    background-color: #FFFFFF;  
	}  
	.top_view {  
	    height: var(--status-bar-height);  
	    width: 100%;  
	    position: fixed;  
	    background-color: #FFFFFF;  
	    top: 0;  
	    z-index: 999;  
	}
	uni-page-body{
		background-color: #FFFFFF;
	}
</style>
